<template>
  <!-- 最顶部红色导航 -- 有的页面需要使用，如公共歌单组件 -->
  <div class="find-music-wrap">
    <ul>
      <li
        class="spec"
        v-for="(item, index) in routerArr"
        :key="index"
        @click="toOtherPage(item.path, item.name, index)"
      >
        <!-- <p :class="commentHLIndex == index ? 'active' : ''">{{ item.text }}</p> -->
        <p>{{ item.text }}</p>
        <!-- R图标 -->
        <span v-show="index == 2"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "red-top-nav",
  data() {
    return {
      // 保存当前高亮的导航，防止刷新的时候重置--------------并没有解决（后面再说）
      commentHLIndex: 0,
      routerArr: [
        { text: "推荐", path: "/find-music/recommend", name: "recommend" },
        { text: "排行榜", path: "/find-music/list", name: "list" },
        { text: "歌单", path: "/find-music/playlist", name: "playlist" },
        { text: "主播电台", path: "/find-music/dj-radio", name: "dj-radio" },
        { text: "歌手", path: "/find-music/singers", name: "singers" },
        { text: "新碟上架", path: "/find-music/new-disc", name: "new-disc" },
      ],
    };
  },
  methods: {
    // 跳转页面
    toOtherPage(path, name, index) {
      this.$router.push({ path, name });
      this.commentHLIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.find-music-wrap {
  width: 100%;
  background-color: #c20c0c;
  height: 34px;
  ul {
    width: 1100px;
    margin: 0 auto;
    color: #fff;
    font-size: 12px;
    width: 744px;
    li {
      float: left;
      width: 84px;
      margin-left: 2px;
      margin-right: 6px;
      text-align: center;
      cursor: pointer;
      &:hover {
        p {
          background-color: #9b0909;
        }
      }
      p {
        display: inline-block;
        height: 20px;
        padding: 0 13px;
        line-height: 20px;
        margin: 7px auto;
        border-radius: 20px;
        text-align: center;
        // 激活背景
        &.active {
          background-color: #9b0909;
        }
      }
    }
    .spec {
      position: relative;
      span {
        display: inline-block;
        width: 8px;
        height: 8px;
        position: absolute;
        top: 9px;
        left: 54px;
        background: url("@/assets/white-r-icon@3x.png") no-repeat;
        background-size: cover;
      }
    }
  }
}
</style>